<template>
  <div class="mylogin">
    <div class="bg">
    <!-- 提示框 -->
    <div class="tips">
       <template>
        <el-button :plain="true" @click="open2">成功</el-button>
        <el-button :plain="true" @click="open4">错误</el-button>
      </template>

    </div>
    <!-- 表单 -->
      <div class="form">
        <div>
          <table>
            <tr>
              <td><h3>登录</h3></td>
            </tr>
            <tr>
              <td>
                
                <input type="text" v-model="name" placeholder="请输入用户名" /></td>
            </tr>
            <tr>
              <td><input type="password" v-model="pwd" placeholder="请输入密码" /></td>
            </tr>
            <!-- <tr>
              <td><input type="text" placeholder="请输入手机号" /></td>
            </tr> -->
            <tr>
              <td><button @click="checkForm">快速登录</button></td>
            </tr>
            <tr>
              <td>
                <span
                  >温馨提示：未注册小黄狗账号的手机号，登录时将自动代表您已同意<router-link
                    to=""
                    >《用户服务协议》</router-link
                  ></span>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      name:'',
      pwd:''
    }
  },
   
   methods: {
    //  提示框
      open2() {
        this.$message({
          message: '登录成功',
          type: 'success'
        });
      },
      open4() {
        this.$message.error('对不起,账号或密码错误');
      },
    
    /** 验证密码 */
    checkPwd(){
      let reg = /^\d{6}$/;
      if(reg.test(this.pwd)){
        return true;
      }else{
        return false;
      }
    },

    /** 验证用户名 */
    checkName(){
      // 验证用户名是否符合要求
      let reg = /^\w{6,15}$/;
      if(reg.test(this.name)){  // 格式合法
        return true;
      }else{  // 格式不正确
        return false;
      }
    },

    /** 表单验证 */
    checkForm(){
      if(this.checkName() && this.checkPwd()){
        console.log('发送请求，执行登录业务');
           //发送post请求，传递两个参数：username passward
         this.axios.post('/v1/users/login',`lname=${this.name}&lpwd=${this.pwd}`).then(res=>{
          console.log(res);
          if(res.data.code==200){//登录成功
            // alert("登录成功");
            this.open2();
            this.$store.commit('loginOk',this.name);
            //把islogin和name存入sessionStorage
            sessionStorage.setItem('islogin',true);
            sessionStorage.setItem('name',this.name);
            this.$router.push('/'); 
          }else if(res.data.code==201){//登录失败
          //  alert("账号或密码错误");
          this.open4();
          }
        })
      }
    }
  },
};
</script>
<style lang="scss">
.mylogin {
  // 提示框
  .tips{
    display:none
  }
  .bg {
    height: 732px;
    background-image: url(/img/login/loginBG.jpg);
    background-size: cover;
    position: relative;
    .form {
      background-color: #fff;
      width: 338px;
      height: 270px;
      padding: 10px;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      position: absolute;
      right: 470px;
      top: 400px;
      > div {
        // border: 1px solid black;
        table {
          tr td {
            padding-left: 13px;
            h3{
                margin-bottom: 10px;
            }
            input {
              width: 268px;
              height: 42px;
              margin-bottom: 15px;
              padding-left: 30px;
            }
            button {
              width: 303px;
              height: 38px;
              background-color: #ffde00;
              margin-bottom: 5px;
            }
            span {
              font-size: 10px;
              a {
                color: #ffde00;
                text-decoration: none;
              }
            }
          }
          & td:nth-child(5) {
            width: 298px;
          }
        }
      }
    }
  }
 
}
</style>